<template>
	<view class="task-wrap">
		<view class="scroll-wrap"  style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 120px;">
				<!-- 样品列表 -->
				<!-- <view v-for="(item, index) in sampleTaskInfo.sampleItemVos">
					<sampleTerm :status="true" :checkSimilar='item.disableChoose' :checkboxVisible="checkboxVisible" ref="refresh" :source='source' :isEgManage='isEgManage' :sampleData="item" title="详情" :editable="false" detailStatus="0"></sampleTerm>
					
					
					
				</view> -->
				<view>
					<checkbox-group @change="checkboxChanges">
				
				
						<view class="sample-term-wrap" v-for="(item, index) in sampleTaskInfo.sampleItemVos"
							:key='index'>
							<view class="sample-term" style="background-color: #fff;" >
								
								<view class="sample-code">
									<text>样品编号：{{item.sampleNo}}</text>
									<text
										:class="'sample-status color_'+ item.sampleStatus">{{sampleStatusMap[item.sampleStatus]}}</text>
									<!-- <u-checkbox style="transform:scale(0.7);" :checked="item.checked"
										v-model="item.sampItemId" shape="circle"></u-checkbox> -->
									<checkbox style="transform:scale(0.7);" 
										:checked="item.checked"
										v-if='checkboxVisible' 
										:disabled="item.disableChoose"
										:value="item.sampItemId" shape="circle"></checkbox>
				
				
								</view>
								<view >
				
				
									<view class="sample-detail">
										<text class="title">检测位置：</text>
										<text class="value">{{item.factorPoint}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">检测类别：</text>
										<text class="value">{{item.secdClassName}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">检测因子：</text>
										<text class="value">{{item.factorName}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">采样人：</text>
										<text class="value">{{item.collectUser?item.collectUser:''}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">采样时间：</text>
										<text class="value">{{item.collectTime?item.collectTime:''}}</text>
									</view>
				
								</view>
								<!-- 底部分割线条 -->
								<!-- <view class="sample-line" v-if="collapse"></view> -->
				
							</view>
				
						</view>
				
					</checkbox-group>
				</view>
				
			</view>
			
			<view class="footerBtn" style="display: flex;" >
				<view class="btn footerBtn footerBtns">
					<view style="padding:0 10px;flex: 1;">
						<button class="rightTabsSingleBtn" type="warning"  @click="modify"
						>修改样品
							<text v-if="editArr.length>0">（{{editArr.length}}）</text>
						</button>
						
						
					</view>
					
				</view>
				
			</view>
		</view>
    </view>
</template>

<script>
	import sampleTerm from '@/components/sample/sample-term.vue'
	const STOKEN_STUTES = {
		'0': '复核人',
		'1': '确认人',
		'2': '审核人'
	}
	export default {
		components:{
			sampleTerm,
		},
		data() {
			return {
				checkboxValue:[],
				STOKEN_STUTES,
				sampleStatusMap:{
					'0':'待采样',
					'1':'已采样',
					'2':'待组长审核',
					'3':'待负责人审核',
					'4':'审核通过',
					'5':'审核失败',
					'6':'已入库',
					'7':'部分出库',
					'8':'已出库',
					'9':'入库中',
					'10':'待复核'
				},
				showCont: false,
				value:['0'],
				collapseList: [],
				checkSimilar: false,
				
				isEgManage:false,
				checkboxVisible:true,
				source:'edit',	
				taskId: '',
				editArr: [],
				sampleTaskInfo: {
					projectName: '',
					consignorName: '',
					inspectionName: '',
					sampleCount: '',
					jobId: '',
					inspectionLinker: '',
					singImageUrl: '',
					sampleVos:[],
				}
			}
		},
		onLoad (e) {
			if(e.taskId) {
				this.taskId = e.taskId
			}
			
		},
		onShow() {
			this.editArr = []
			this.getSampleVos()
		},
		methods: {
			checkboxChanges: function(e) {
				console.log(e.detail.value,3333);
				let values = e.detail.value;
				this.editArr = values
				this.sampleTaskInfo.sampleItemVos.map((item) => {
			
					this.editArr.map((inj) => {
						if (item.sampItemId == inj) {
							item.checked = true
							
							
						}else{
						}
					})
				})
				
				this.selectDelData()
				this.$forceUpdate()
			
			},
			
			checkColor(v) {
				let color;
				color = !v ? '#fff' : '#d3dcf9'
				if(this.checkSimilar) color = "#ccc"
				return color
			},
			getSampleVos() {
				this.$api.getSamplerList('sample/items/' + this.taskId,res => {
				    if (res.code === 200) {
				        this.sampleTaskInfo = res.result	|| []	
						if(this.sampleTaskInfo.sampleItemVos.length > 0){
							this.sampleTaskInfo.sampleItemVos.map((item)=>{
								item.disableChoose = false
							})
						}
				    }
				})
			},
			//打开批量操作弹出按钮框
			openDialogBtns() {
				this.dialogBtns_hidden = true
			},
			//修改
			modify(){ 
				console.log(this.editArr.length);
				if(this.editArr.length == 0){
					uni.showToast({
						title: '请选择需修改数据',
						icon: 'none',
						duration: 2000
					});
					return
				}
				let arr  = []
				this.sampleTaskInfo.sampleItemVos.map((item)=>{
					 if(item.checked) {
						 arr.push(item) 
					 }
				 })
				this.$common.navigateTo('/pages/sampleLeader/opt/batchModifyCommit?taskId=' + this.taskId+ '&editArr='  +encodeURIComponent(JSON.stringify(arr)));
			},
			//监听选中
			selectDelData(){
				let _this = this
				_this.sampleTaskInfo.sampleItemVos.map((item)=>{
					 if(item.checked) {
						 _this.sampleTaskInfo.sampleItemVos.map((its)=>{
							 if(its.secdClassId != item.secdClassId || its.factorPoint != item.factorPoint){
								 its.disableChoose = true
								 if(its.checked) { 
									 its.disableChoose = false
								 }
							 }
							 
						 })
					 }
				 })
				 if ( _this.editArr.length == 0){
					 _this.sampleTaskInfo.sampleItemVos.map((its)=>{
					 		its.disableChoose = false
					 })
				 }
				 this.$forceUpdate()
			},
			goToHandWriting(sampItemId){
				this.$common.navigateTo('/pages/handWriting/index?sampItemId='+sampItemId);
			},
			toEgManage(){
				uni.setNavigationBarTitle({
				title:'样品管理'
				})
				this.hidden = true
				this.isEgManage = true
				
			}
		}
	}
</script>

<style scoped>
	.activeBgColor {
		background: #d3dcf9!important;
	}
	uni-page-body{
			height: 100%;
	}
	.task-wrap{
		background: #F0F2FA;
		height: 100vh;
		display: flex;
		flex-direction: column;
		
	}
	.project-info{
		height: 280rpx;
		width:calc(100%-98rpx);
		background-color: #D6D8DF;
		padding-left: 49rpx;
		padding-right: 49rpx;
	}
	.sample-detail{
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		
	}
	.sample-detail .title{
		color:#193566;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 140rpx;
		text-align: right;
	}
	.sample-detail .value{
		color:#193566;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left:5%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	.scroll-wrap{
		flex: 1;
		overflow: scroll;
		padding-bottom: 50rpx;
	}
	.tabContainer{
		height: auto;
	}
	.signature{
		position: absolute;
		top: 0;
		right: 0;
		width: 167rpx;
		height: 61rpx;
		color: #fff;
		background-color: #193566;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}
	.signatureImg image{
		position: absolute;
		top: 0;
		right: 0;
		width: 61rpx;
		height: 61rpx; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}
	.footerBtn {
		position: fixed;
		bottom: 0;
		 left: 0;
		 width: 100%;
	}
	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}
	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}
	.dialogBtns {
		position: absolute;
		top: -180rpx;
		left: 0;
		padding:10rpx 20rpx;
		background: #d2dcf8;
		width: 100%;
		box-shadow: 1px 0px 1px #ccc;
		padding-top: 20rpx;
	}
	.dialogBtn {
		border: 1px solid #eee;
		margin-bottom: 10rpx;
		width: 100%;
		padding: 0;
		font-size: 14px;
		height: 60rpx;
		color:#2f3a89;
		background: #ffda94;
	}
	.leftTabsBtn {
		width: 100%;
		border: 1px solid #eee;
		height: 60rpx;
		font-size: 14px;
		color:#2f3a89;
		background: #ffda94;
	}
	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}
	.rightTabsSingleBtn {
		width: 50%;
		font-size: 14px;
		color:#2f3a89;
		background: #ffda94;
		box-shadow: 1px 1px 3px #ccc;
		
	}
</style>


<style scoped>
	.sample-term-wrap{
		width:calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: center; */
		padding-left: 35rpx;
		padding-right: 35rpx;
	}
	.sample-term{
		/* width: 90%; */
		min-height:390rpx;
		/* height:370rpx; */
		border-radius: 19rpx;
		background:#fff;
		padding:30rpx;
		padding-top:0rpx;
		box-shadow: 0px 5px 11px 2px rgba(0,0,0,0.16);
		margin-top: 30rpx;
	}
	.radius{
		border-bottom-left-radius:0 ;
		border-bottom-right-radius:0 ;
	}
	.sample-code{
		display: block;
		height: 84rpx;
		width: 100%;
		border-bottom: 1px solid #ECECEC;;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
		font-weight: bolder;
		color: #2E2E2E;
	}
	.sample-line{
		display: block;
		height: 14rpx;
		width: 100%;
		border-bottom: 1px solid #ECECEC;;
		color: #2E2E2E;
	}
	.sample-detail{
		margin-top: 25rpx;
		font-size: 25rpx;
		min-height: 32rpx;
		display: flex;
	}
	.sample-detail .title{
		color:#2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 125rpx;
		text-align: right;
	}
	.sample-detail .value{
		color:#555555;
		font-weight: 400;
		opacity: 0.7;
		width: 70%;
		display: inline-block;
		padding-left:5%;
	}
	.sample-detail .value-collapse{
		color:#555555;
		font-weight: 400;
		opacity: 0.7;
		width: 70%;
		display: inline-block;
		padding-left:5%;
	}
	.status{
		float: right;
		font-weight: bolder;
		font-size: 25rpx;
	}
	.reject{

		color: #FFDA94 ;
	}
	.confirm{
		color: #2F3A89 ;
	}
	::v-deep .collapse-wrap{
		/* width: 90%!important; */
	
	}
	.collapse-content {
		max-height: 140rpx;
		padding:30rpx;
		padding-top:0rpx;
		padding-bottom:0rpx;
		
	}
	.collapse-content:last-child{
		height: 140rpx;
		padding:30rpx;
		padding-top:0rpx;
		padding-bottom:0rpx;
		
	}
	::v-deep .uni-collapse-item__title{
		display: none!important;
	}
	::v-deep .uni-collapse-item__wrap{
		border-top: 1px solid #ECECEC;
	}
	::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border{
		border-bottom-width: 0px!important;
	}
	.button{
		height:61rpx;
		width: 100%;
		border-top-left-radius:0 ;
		border-top-right-radius:0 ;
		background-color: #2F3A89;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 待采样 色号 */
	.color_0{
		color: #60D8FF;
	}
	/* 待复核 色号 */
	.color_10{
		color: #749EF4;
	}
	/* 已采样 色号 */
	.color_1{
		color: #81ACBD;
	}
	.sample-status{
		font-size: 25rpx;
		padding-right: 20rpx;
	}
	.icon-taggle{
		color:#fff;
		margin-left: 5px;
	}
	::v-deep .uniui-bottom{
		color:#fff!important;
	}
	::v-deep .uniui-top{
		color:#fff!important;
	}
</style>
